<template>
  <header>
    <div class="header-boss" v-show="isShow" :style="opaObj">
      <router-link class="header-head" to="/" tag="div">
            <span class="iconfont">&#xe618;</span>
      </router-link>
      <div class="header-search">
            <span>城市选择</span>
      </div>
    </div>
    <router-link class="lunbo-fanh" to="/" tag="div" v-show="!isShow">
          <span class="iconfont">&#xe618;</span>
    </router-link>
  </header>
</template>

<script>
export default {
  name: 'DetailHeader',
  data () {
    return {
      isShow: false,
      opaObj: {
        opacity: 0
      }
    }
  },
  methods: {
    detailScroll () {
      let heightTop = document.documentElement.scrollTop || document.body.scrollTop
      if (heightTop > 30) {
        this.isShow = true
        this.opaObj.opacity = heightTop / 200
      } else {
        this.isShow = false
      }
    }
  },
  mounted () {
    window.addEventListener('scroll', this.detailScroll)
  }
}
</script>

<style lang="stylus" scoped="scoped">
  @import '~@/assets/css/variable.styl'
  header
    position relative
    .header-boss
      width 100%
      background $bgcolor
      color white
      height 1rem
      line-height 1rem
      position fixed
      top 0
      left 0
      z-index 3
      .header-head
        float left
        height 1rem
        span
          font-size 0.5rem
      .header-search
        text-align center
        span
          font-size 0.4rem
    .lunbo-fanh
      background rgb(90,102,112)
      width 0.72rem
      height 0.72rem
      line-height 0.72rem
      position absolute
      top 0.1rem
      left 0.1rem
      text-align center
      z-index 1
      color white
      border-radius 0.6rem
      span
        color white
        font-size 0.4rem
</style>
